<template>
    <div>
        <el-card>
            争议订单
        </el-card>

        <!-- 订单列表 -->
        <el-card class="list">
            <el-table :data="currentPageData" border style="width: 100%" class="table">

                <el-table-column prop="orderId" label="订单ID" />
                <el-table-column prop="disputerId" label="争议发起人ID" />
                <el-table-column prop="reason" label="理由" />

                <el-table-column prop="resolve" label="是否解决">
                    <template #default="scope">
                        <el-tag :type="scope.row.resolve === 1 ? 'primary' : 'danger'">
                            {{ scope.row.resolve === 1 ? '已解决' : '未解决' }}
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="resolveMethod" label="处理方法" />

                <!-- :disabled="scope.row.resolve === 1" -->
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button :disabled="scope.row.resolve === 1" type="primary" plain @click="handleEdit(scope.row); dialogFormVisible = true;">
                            编辑
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>

            <!-- 分页器组件 -->
            <el-pagination class="mt-4" background layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage" :page-sizes="[8, 10, 15]" :page-size="pageSize"
                :total="DisputeOrderList.length" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </el-card>

        <!-- 编辑表单 -->
        <el-dialog v-model="dialogFormVisible" title="请解决争议订单" width="500">

            <el-form-item label="争议ID" :label-width="formLabelWidth">
                <el-input v-model="form.disputeId" disabled placeholder="系统自动填充" />
            </el-form-item>

            <el-form :model="form">
                <el-form-item label="解决方法" :label-width="formLabelWidth">
                    <el-input v-model="form.resolveMethod" autocomplete="off" />
                </el-form-item>

            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="resetUpload();dialogFormVisible = false;">取消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false; ConfirmBtn()">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { getDisputeListAPI, postHandleDisputedOrders } from "@/api/order"
import { onMounted, ref, computed, reactive } from "vue"
import { ElMessage } from 'element-plus'


const DisputeOrderList = ref([]) // 全部订单数据
const currentPage = ref(1) // 当前页码
const pageSize = ref(8) // 每页显示条数

// 计算当前页要显示的数据
const currentPageData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    return DisputeOrderList.value.slice(start, end)
})

// 获取全部订单数据
const getDisputeList = async () => {
    const res = await getDisputeListAPI()
    DisputeOrderList.value = res
}
onMounted(() => {
    getDisputeList()
})

// 处理每页条数变化
const handleSizeChange = (newSize: number) => {
    pageSize.value = newSize
    currentPage.value = 1 // 重置为第一页
}
// 处理页码变化
const handleCurrentChange = (newPage: number) => {
    currentPage.value = newPage
}

const formLabelWidth = '180px'//输入框标题宽度
const dialogFormVisible = ref(false)
// 表单数据存储
const form = reactive({
    resolve: 1,//是否解决，令默认值为1（表示已解决：接口参数）
    disputeId: "",//争议ID
    resolveMethod: "",//解决方法（管理员给出）
})
// 清空表单
const resetUpload=()=>{
    form.disputeId = ""; 
    form.resolveMethod = ""; 
}

// 编辑按钮
const handleEdit = (row) => {
    console.log('编辑按钮被点击，订单ID:', row.orderId)
    // 这里可以添加编辑逻辑，比如跳转到编辑页面或显示编辑弹窗
    form.disputeId = row.orderId
    console.log("争议ID:", form.disputeId)
}

// 表单确认按钮
const ConfirmBtn = async () => {
    console.log("点击确认按钮，表单数据：", form)
    // 调用处理争议订单接口-传入表单数据
    const res = await postHandleDisputedOrders(form)
    console.log(res.message)
    if (res.message === "投诉处理成功") {
        ElMessage.success('投诉处理成功')

        // 更新 resolveMethod=>立马更新数据无需点击刷新
        const index = DisputeOrderList.value.findIndex(item => item.orderId === form.disputeId);
            if (index!== -1) {
                DisputeOrderList.value[index].resolveMethod = form.resolveMethod;
            }

    } else {
        ElMessage.error('处理失败')
    }
}
</script>

<style scoped>
.list {
    margin-top: 20px;
}

.table {
    margin-bottom: 20px;
}
</style>